<template>
	<div class="div_bg">
		<div class="zhuce_login_box">
			<ul class="login_ul">
				<li class="login_li">
					<input type="number" v-model="phone" placeholder="请输入手机号" />
				</li>
				<li class="login_li login_li2">
					<input type="text" style="padding-left: 0.49rem;" class="input_zhuce" v-model="yanzhengma" placeholder="请输入验证码" />
					<!-- 验证码 -->
					<!-- <p class="p">
            <span v-if="inentify" @click="send" style="color:#d31d17">获取验证码</span>
            <span v-if="timer">{{count}}s</span>
          </p> -->
					<SendSms :phone="phone" style="color: #d31d17;" />
				</li>
				<li class="login_li">
					<input type="password" v-model="dengpassword" placeholder="请输入登录密码" />
				</li>
				<li class="login_li">
					<input type="password" v-model="dengpassword2" placeholder="请重复输入登录密码" />
				</li>

				<!--<li class="login_li">
          <input type="password" v-model="dealpassword" placeholder="请输入交易密码" />
        </li>
        <li class="login_li">
          <input type="password" v-model="dealpassword2" placeholder="请重复输入交易密码" />
        </li>-->
			</ul>
			<input type="button" class="submit_btn" @click="zhuce" value="立即注册" />
			<div class="lianjie_div2">
				<router-link tag="span" to="login">返回登录</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	import SendSms from "../../AComp/send-sms";
	export default {
		components: {
			SendSms
		},
		data() {
			return {
				phone: "", //手机号
				yanzhengma: "", //验证码
				dengpassword: "", //登录
				dengpassword2: "", //重复
				inentify: true, //显示获取验证码
				timer: false, //显示读取秒数 v-show控制显示‘获取按钮’还是‘倒计时’
				count: 60, //倒计时 计数器
				time: ""
			};
		},
		methods: {
			//  短信发送
			async send() {
				if(!this.phone) {
					this.$toast("请输入手机号");
					return;
				}
				try {
					let res = await this.http.post("/api/register/send/sms", {
						mobile: this.phone
					});
					this.$toast("发送成功");
				} catch(error) {
					this.$toasted.error(error.message, {
						icon: "error"
					}).goAway(2000);
				}
				(this.inentify = !this.inentify),
				(this.timer = true),
				(this.time = setInterval(() => {
					this.count -= 1;
					if(this.count == 0) {
						clearInterval(this.time);
						this.inentify = !this.inentify;
						this.timer = false;
						this.count = 60;
					}
				}, 1000));
			},
			async zhuce() {
				if(!this.phone ||
					!this.yanzhengma ||
					!this.dengpassword ||
					!this.dengpassword2 
				) {
					this.$toast("信息输入不能为空");
					return;
				}
				if(!/^[0-9A-Za-z]{6,15}$/.test(this.dengpassword)) {
					this.$toast("密码少于6位");
					return;
				}
				if(this.dengpassword != this.dengpassword2) {
					this.$toast("两次密码输入不一致");
					return;
				}
				//    	if(this.dealpassword != this.dealpassword2) {
				//					this.$toast("两次交易密码输入不一致");
				//					return;
				//				}
				//   对接口
				try {
					let res = await this.http.post("/api/register", {
						//   对字段
						mobile: this.phone,
						sms: this.yanzhengma,
						pwd: this.dengpassword,
						confirm_pwd: this.dengpassword2,
//						sec_pwd: this.dealpassword,
//						confirm_sec_pwd: this.dealpassword2
					});
					if(res.status_code == 200) {
						this.$toast("注册成功");
						this.$router.replace({
							name: "login"
						});
					} else {
						this.$toast(res.message);
					}
				} 
				catch(error) {
					//      this.$toasted.error(error.message,{ icon: "error" }).goAway(1000);
				}
			}
		}
	};
</script>

<style scoped>
	@import url("../../../assets/css/ttcp/zhuce.css");
	.login_li2 {
		display: flex;
		justify-content: space-between;
	}
	
	.login_li2 .p {
		height: 0.8rem;
		line-height: 0.8rem;
		padding-right: 0.29rem;
	}
	
	.login_li2 .p span {
		color: #d31d17;
	}
</style>